<template>
    <div>
        <!-- <h3>公用房基本信息录入</h3> -->
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公用房</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息录入</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 卡片视图 -->
        <el-card>
            <el-tabs v-model="activeName" :stretch="true">
                <el-tab-pane label="校区信息录入" name="1">
                    <el-form ref="schoolFormRef" :model="schoolForm" label-width="100px">
                        <el-row :gutter="30">
                            <h5>基本信息</h5>
                            <el-col :span="18">
                                <el-form-item label="校区名称" prop="campusName">
                                    <el-input v-model="schoolForm.campusName" placeholder="请输入校区名称"></el-input>
                                </el-form-item>
                                <el-form-item label="校区编号" prop="campusId">
                                    <el-input v-model="schoolForm.campusId" placeholder="请输入校区编号"></el-input>
                                </el-form-item>
                                <el-form-item label="性质" prop="campusNature">
                                    <el-select v-model="schoolForm.campusNature" placeholder="请选择校区性质"  style="width:100%">
                                        <el-option label="性质一" value="性质一"></el-option>
                                        <el-option label="性质一" value="性质二"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="占地面积" prop="campusArea">
                                    <el-input v-model="schoolForm.campusArea" placeholder="请输入占地面积"></el-input>
                                </el-form-item>
                                <el-form-item label="建筑面积" prop="campusBuildArea">
                                    <el-input v-model="schoolForm.campusBuildArea" placeholder="请输入建筑面积"></el-input>
                                </el-form-item>
                                <el-form-item label="位置" prop="campusPosition">
                                    <el-input v-model="schoolForm.campusPosition" placeholder="请选择校区位置"  style="width:100%"></el-input>
                                </el-form-item>
                                
                                <!-- <div class="mtMIni"> -->
                                <el-form-item>
                                    <el-button type="info">重置</el-button>
                                    <el-button type="primary" @click="schoolFormSubmit">导入</el-button>
                                </el-form-item>
                                    
                                <!-- </div> -->
                            </el-col>
                            <el-col :span="12">
                                <!-- <h5>添加本校区楼栋信息</h5>
                                <el-divider></el-divider>
                                
                                <h5>土地地籍图纸、权属证书、照片</h5>
                                <el-divider></el-divider>
                                
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip">支持jpeg、png格式上传</div>
                                </el-upload> -->
                                <!-- <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                    <div slot="tip" class="el-upload__tip">支持word、pdf格式上传</div>
                                </el-upload> -->
                                <!-- <el-form-item>
                                    <el-input v-model="school" placeholder=""></el-input>
                                </el-form-item> -->
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="楼栋信息录入" name="2">
                    <el-form ref="buildFormRef" :model="buildingForm" label-width="100px">
                        <el-row :gutter="30">
                            <h5>基本信息</h5>
                            <el-col :span="12">
                                <el-form-item label="校区名称" prop="schoolName">
                                    <el-select v-model="buildingForm.schoolName"  style="width:100%" placeholder="请选择校区">
                                        <el-option
                                            v-for="item in campusName"
                                            :key="item.campusName"
                                            :label="item.campusName"
                                            :value="item.campusId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="楼栋名称" prop="buildName">
                                    <el-input v-model="buildingForm.buildName" placeholder="请输入楼栋名称"></el-input>
                                </el-form-item>
                                <el-form-item label="性质" prop="buildNature">
                                    <el-select v-model="buildingForm.buildNature" placeholder="请选择楼栋性质"  style="width:100%">
                                        <el-option label="教学" value="shanghai"></el-option>
                                        <el-option label="学生宿舍" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="建筑面积" prop="buildBuildArea">
                                    <el-input v-model="buildingForm.buildBuildArea" placeholder="请输入建筑面积"></el-input>
                                </el-form-item>
                                <el-form-item label="使用面积" prop="buildArea">
                                    <el-input v-model="buildingForm.buildArea" placeholder="请输入使用面积"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="价值" prop="buildVal">
                                    <el-input v-model="buildingForm.buildVal" placeholder="请输入价值"></el-input>
                                </el-form-item>
                                <el-form-item label="位置" prop="buildPosition">
                                    <el-input v-model="buildingForm.buildPosition" placeholder="请输入楼栋位置"  style="width:100%"></el-input>
                                        <!-- <el-option label="华东交通大学南区" value="shanghai"></el-option>
                                        <el-option label="华东交通大学北区" value="beijing"></el-option>
                                    </el-select> -->
                                </el-form-item>
                                <!-- <el-form-item label="单元数">
                                    <el-input v-model="buildingForm.unitsNmuber"></el-input>
                                </el-form-item> -->
                                <el-form-item label="楼层数" prop="buildFloorNums">
                                    <el-input v-model="buildingForm.buildFloorNums" placeholder="请输入楼层数"></el-input>
                                </el-form-item>
                                <!-- <el-form-item label="竣工日期">
                                     <el-date-picker type="date" placeholder="选择日期" v-model="buildingForm.completionDate" style="width: 100%;"></el-date-picker>
                                </el-form-item> -->
                            </el-col>
                            
                            <!-- <h5>土地地籍图纸、权属证书、照片</h5>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip">支持jpeg、png格式上传</div>
                                </el-upload>
                            </el-col>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                    <div slot="tip" class="el-upload__tip">支持word、pdf格式上传</div>
                                </el-upload>
                            </el-col> -->
                            
                            
                            <el-col :span="4" :offset="10">
                                <el-button type="info" @click="resetBuildForm">重置</el-button>
                                <el-button type="primary" @click="buildFormSubmit">录入</el-button>
                            </el-col>
                        </el-row>
                       
                    </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="楼层信息录入" name="3">
                    <el-form ref="floorFormRef" :model="floorForm" label-width="100px">
                        <el-row :gutter="30">
                            <h5>基本信息</h5>
                            <el-col :span="18">
                                <el-form-item label="楼栋名称" prop="buildName">
                                    <!-- <el-input v-model="schoolForm.name"></el-input> -->
                                    <el-select v-model="floorForm.buildName" placeholder="请选择楼栋" style="width:100%">
                                        <el-option
                                            v-for="item in buildName"
                                            :key="item.buildName"
                                            :label="item.buildName"
                                            :value="item.buildId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                
                                <el-form-item label="楼层数" prop="floorNum">
                                    <el-input v-model="floorForm.floorNum" placeholder="请输入楼层数"></el-input>
                                    <!-- <el-select v-model="floorForm.floorNum" placeholder="请选择楼层数">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select> -->
                                </el-form-item>
                                
                                <el-form-item label="性质" prop="floorNature">
                                    <el-input v-model="floorForm.floorNature" placeholder="请选择房间性质"  style="width:100%"></el-input>
                                        <!-- <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select> -->
                                </el-form-item>
                                
                                <el-form-item label="楼层面积" prop="floorArea">
                                    <el-input v-model="floorForm.floorArea" placeholder="请输入楼层面积"></el-input>
                                </el-form-item>
                                <el-form-item label="房间数量" prop="floorRoomNums">
                                    <el-input v-model="floorForm.floorRoomNums" placeholder="请输入楼层数量"></el-input>
                                </el-form-item>
                                <el-form-item label="结构" prop="floorStructure">
                                    <el-input v-model="floorForm.floorStructure" placeholder="请输入楼层结构"></el-input>
                                </el-form-item>
                                <el-form-item label="布局" prop="floorLayout">
                                    <el-input v-model="floorForm.floorLayout" placeholder="请输入楼层布局"></el-input>
                                </el-form-item>
                                <el-form-item> 
                                    <el-button type="info" @click="resetFloorForm">重置</el-button>
                                    <el-button type="primary" @click="floorFormSubmit">导入</el-button>
                                </el-form-item>
                            </el-col>
                            
                            <!-- <h5>添加本校区楼栋信息</h5>
                            
                            
                            <h5>土地地籍图纸、权属证书、照片</h5>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip">支持jpeg、png格式上传</div>
                                </el-upload>
                            </el-col>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                    <div slot="tip" class="el-upload__tip">支持word、pdf格式上传</div>
                                </el-upload>
                            </el-col> -->
                            
                        </el-row>
                       
                    </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="房间信息录入" name="4">
                    <el-form ref="form" :model="houseForm" label-width="100px">
                        <el-row :gutter="30">
                            <h5>基本信息</h5>
                            <el-col :span="18">
                                <el-form-item label="校区编号">
                                    <el-input v-model="schoolForm.number" placeholder="请选择校区编号"></el-input>
                                </el-form-item>
                                <el-form-item label="楼层" prop="floorName">
                                    <el-select v-model="houseForm.floorName" placeholder="请选择楼层"  style="width:100%">
                                        <el-option
                                            v-for="item in floorName"
                                            :key="item.floorName"
                                            :label="item.floorName"
                                            :value="item.floorId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="性质">
                                    <el-select v-model="schoolForm.region" placeholder="请选择房间性质"  style="width:100%">
                                        <el-option label="教室" value="教室"></el-option>
                                        <el-option label="实验室" value="实验室"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="占地面积">
                                    <el-input v-model="schoolForm.name" placeholder="请输入占地面积"></el-input>
                                </el-form-item>
                                <el-form-item label="建筑面积">
                                    <el-input v-model="schoolForm.number" placeholder="请输入建筑面积"></el-input>
                                </el-form-item>
                                <el-form-item label="位置">
                                    <el-select v-model="schoolForm.location" placeholder="请选择房间位置"  style="width:100%">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="info">重置</el-button>
                                    <el-button type="primary">导入</el-button>
                                </el-form-item>
                            </el-col>
                            
                            
                            <!-- <h5>添加本校区楼栋信息</h5>
                            
                            
                            <h5>土地地籍图纸、权属证书、照片</h5>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip">支持jpeg、png格式上传</div>
                                </el-upload>
                            </el-col>
                            <el-col :span="11" :offset="1">
                                <el-upload list-type="picture" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                    <div slot="tip" class="el-upload__tip">支持word、pdf格式上传</div>
                                </el-upload>
                            </el-col> -->
                        </el-row>
                       
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName:'1',
            // 校区详情
            schoolForm:{
                campusName:'',
                campusId:'',
                campusNature:'',
                campusArea:'',
                campusBuildArea:'',
                campusPosition:'',
            },
            buildingForm:{
                schoolName:'',
                buildName:'',
                buildNature:'',
                buildBuildArea:'',
                // 使用面积
                buildArea:'',
                buildVal:'',
                buildPosition:'',
                buildFloorNums:'',
            },
            floorForm:{
              buildName:'',
              floorNum:'',
              floorNature:'',
              floorArea:'',
              floorRoomNums:'',
              floorStructure:'',
              floorLayout:'',
            },
            houseForm:{
                floorName:'',
            },
            
            // 校区信息
            campusName:{},
            // 楼栋信息
            buildName:{},
            // 楼层信息
            floorName:{},
        }
    },
    created(){
        this.getSchoolForm();
        this.getBuildForm();
        this.getFloorForm();
        // this.getHouseForm();
    },
    methods: {
        // 提交校区信息表单
        async schoolFormSubmit(){
            // console.log(this.schoolForm);
            await this.$http.put('campus',this.schoolForm).then(res=>{
                // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('校区信息提交失败！');
                }
                this.$message.success('提交成功！');
                this.getSchoolForm();
                this.resetSchoolForm();
            });
            
        },
        //重置校区表单 
        resetSchoolForm(){
            this.$refs.schoolFormRef.resetFields();
        },
        // 获取校区信息
        async getSchoolForm(){
            await this.$http.get('campus/findAll').then(res=>{
                // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('校区信息查询失败！');
                }
                this.campusName = res.data.data;
            });
            
        },
        
        // 录入楼栋信息
        async buildFormSubmit(){
            const res = await this.$http.put(`build/${this.buildingForm.schoolName}/${this.buildingForm.buildName}`).then(res=>{
                    // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('楼栋信息插入失败！');
                }
                this.$message.success('楼栋信息提交成功！');
                this.resetBuildForm();
                this.getBuildForm();
            })
        },
        //重置楼栋表单
        resetBuildForm(){
            this.$refs.buildFormRef.resetFields();
        },
        // 获取楼栋表单
        async getBuildForm(){
            const res = await this.$http.get('build/findAll');
            // console.log(res);
            this.buildName = res.data.data;
        },
        
        // 录入楼层信息
        async floorFormSubmit(){
            await this.$http.put(`floor/insertFloorNumByBuildId/${this.floorForm.buildName}/${this.floorForm.floorNum}`).then(res=>{
                    // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('录入楼层信息失败！');
                }
                this.$message.success('录入楼层信息成功！');
                this.resetFloorForm();
            })
            
        },
        
        // 重置楼层表单
        resetFloorForm(){
            this.$refs.floorFormRef.resetFields();
        },
        
        // 获取楼层表单
        async getFloorForm(){
            await this.$http.get('floor/findAll').then(res=>{
                if(res.data.code!==1){
                    return this.$message.error('错误')
                }
                this.floorName = res.data.data
                // console.log(res.data.data);
                // console.log(this.floorName);
            })
        },
        
        // 录入房间信息
        async houseFormSubmit(){
            const res  = await this.$http.put(`/publicHouse/floor/${this.floorName.floorId}/${this.houseForm.publicHouseName}`);
            console.log(res);
            
        }
        
        
        // 获取房间信息
        // async getHouseForm(){
        //     const res= await this.$http.get(`/publicHouse/floor/1`)
        //     console.log(res);
        // }
    },
}
</script>   
<style scoped>
    .el-card .el-tabs .el-tab-pane{
        width: 100%;
    }
    .el-form-item{
        width: 60%;
        margin-left: 70px;
    }
    .el-card h5{
        margin:30px 120px;
        color:#4994fb;
        font-size: 18px;
    }
    .mtMIni{
        margin-top: 50px;
    }
</style>
